<template>
  <div class="son">
    <div class="w-100 ib">Son</div>
    <el-select @change="getSon" v-model="value" placeholder="Son data">
      <el-option
        v-for="item in sonOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <!-- 
      Vue2.4提供了$attrs , $listeners 来传递数据与事件，
      跨级组件之间的通讯变得更简单。 
    -->
    <gSon v-bind="$attrs" v-on="$listeners" 
      v-on:getggSon="getggSon" />
    <!-- 
      $attrs：
        包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。
        当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，
        并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。
      $listeners：
        包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。
        它可以通过 v-on="$listeners" 传入内部组件

      作者：浪里行舟
      链接：https://juejin.im/post/5cde0b43f265da03867e78d3 
    -->

  </div>
</template>
 
<script>
import gSon from './gson'
export default {
  name: '',
  components: { gSon },
  // 可以关闭自动挂载到组件根元素上的没有在props声明的属性
  // boolean default true
  inheritAttrs: false, 
  props: {
    sonOptions: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      // sonOptions:[
      //   {value: '选项1', label: 'label1'},
      //   {value: '选项2', label: 'label2'},
      //   {value: '选项3', label: 'label3'}
      // ],
      value: '选项1'
    }
  },
  created() {
    console.log(this.$attrs)
  },
  mounted() {
  },
  methods: {
    getSon(v) {
      console.log(v)
    },
    openDialog() {
      window.alert('open dialog')
    },
    getggSon(v) {
      this.value = v
    }
  }
}
</script>
 
<style scoped lang="scss">
 
</style>